<template>
  <left-right-window :window="window" :config="{}">
    <template #left-body>
      <left-menu @switch-menu="(name) => (active = name)" />
    </template>
    <template #default>
      <appearance-setting v-if="active === 'appearance'" />
      <wallpaper-setting v-if="active === 'wallpaper'" />
      <desktop-setting v-if="active === 'desktop'" />
    </template>
  </left-right-window>
</template>

<script lang="ts" setup>
import LeftRightWindow from "../../layout/left-right-window/LeftRightWindow.vue"
import LeftMenu from "./features/LeftMenu.vue"
import AppearanceSetting from "./features/AppearanceSetting.vue"
import WallpaperSetting from "./features/WallpaperSetting.vue"
import DesktopSetting from "./features/DesktopSetting.vue"
import { onMounted, ref } from "vue"
import type BiuOS from "@/core/biu-os"

const props = defineProps({
  application: {
    type: Object as () => BiuOS.Application,
    required: true
  },
  window: {
    type: Object as () => BiuOS.Window
  }
})

const active = ref("appearance")

onMounted(() => {
  if (props.window?.props?.data && props.window?.props.data.active) {
    active.value = props.window?.props?.data.active
  }
})
</script>

<style scoped lang="scss"></style>
